<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
		<title>取回账号密码</title>
        <meta name="keywords" content="{$common.keywords}" />
		<meta name="description" content="{$common.description}" />
		<!-- Set render engine for 360 browser -->
		<meta name="renderer" content="webkit">
		<!-- No Baidu Siteapp-->
		<meta http-equiv="Cache-Control" content="no-siteapp" />
		<!-- Add to homescreen for Chrome on Android -->
		<meta name="mobile-web-app-capable" content="yes">
		<!-- Add to homescreen for Safari on iOS -->
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<!--#include file="resources.html"-->
		<!--鼠标经过导航跳动开始-->
		<!--<script type="text/javascript">
			$(function(){
				 $(".am-topbar-nav li").each(function(k,a){
					new JumpObj(a,5);//晃动幅度
					$(a).hover(function(){this.parentNode.parentNode.addClass("hover")});
				});
		 	}); 
		
		</script>-->
		<!--鼠标经过导航跳动结束-->
		<!--<script type="text/javascript">
			//注册信息表单验证开始
			$(function(){
				//第一步验证开始
				
				var validate1=$("#myform_step1").validate({
					rules:{
						step1user:{
							required:true,
							email:true
						},
						step1yzm:{
							required:true
						}
					},
					messages:{
						step1user:{
							email:"请输入邮箱或者手机号码！"
						}
					},
					errorPlacement: function(error, element) { 
					    if ( element.is(":radio") ) 
					        error.appendTo ( element.parent() ); 
					    else if ( element.is(":checkbox") ) 
					        error.appendTo ( element.parent().parent() ); 
					    else if ( element.is("input[id=step1yzm]") ) 
					        error.appendTo ( element.parent() );
					    else 
					        error.insertAfter(element); 
					},
					 
				});
				
				//第一步验证结束
				
				//第二步手机验证开始
				var validate2=$("#myform_step2_phone").validate({
					rules:{
						step2phoneuser:{
							required:true,
							isMobile:true,
							isPhone:true
						},
						step2phoneyzm:{
							required:true
						},
					},
					messages:{
						phoneuser:{
							isMobile:"请输入手机号码！",
							isPhone:"请输入手机号码！"
						},
					},
					errorPlacement: function(error, element) { 
					    if ( element.is(":radio") ) 
					        error.appendTo ( element.parent() ); 
					    else if ( element.is(":checkbox") ) 
					        error.appendTo ( element.parent().parent() ); 
					    else if ( element.is("input[id=step2phoneyzm]") ) 
					        error.appendTo ( element.parent() );
					    else 
					        error.insertAfter(element); 
					},
				})
				//第二步手机验证结束
				
				//第二步邮箱验证开始
				var validate3=$("#myform_step2_email").validate({
					rules:{
						step2emailuser:{
							required:true,
							email:true
						},
						step2emailyzm:{
							required:true
						},
					},
					messages:{
						emailuser:{
							email:"请输入正确的邮箱！"
						},
					},
					errorPlacement: function(error, element) { 
					    if ( element.is(":radio") ) 
					        error.appendTo ( element.parent() ); 
					    else if ( element.is(":checkbox") ) 
					        error.appendTo ( element.parent().parent() ); 
					    else if ( element.is("input[id=step2emailyzm]") ) 
					        error.appendTo ( element.parent() );
					    else 
					        error.insertAfter(element); 
					},
				})
				//第二步邮箱验证结束
			})	
		</script>-->
		<script type="text/javascript">
			//第一步跳转开始
			function step1yz(){
				var step1user=$("#step1user").val();
				var step1yzm=$("#step1yzm").val();
				var re=/^1([3]\d|4[57]|5[^3]|8\d)\d{8}$/;
				var reg =/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((\.[a-zA-Z0-9_-]{2,3}){1,2})$/;
				if(step1user==""){
//					$("#step1user").css("border-color","#FF0000");
					$("#step1user").next("label").show();
					return false;
				}
//				$("#step1user").css("border-color","#cccccc");
				$("#step1user").next("label").hide();
				if(step1yzm==""){
					$("#step1yzm").next().next("label").show();
					return false;
				}
				$("#step1yzm").next().next("label").hide();
				if(re.test(step1user)){
					$(".step1_div").hide();
					$(".step1_phone").show();
				   }else if(reg.test(step1user)){
				   	$(".step1_div").hide();
					$(".step1_email").show(); 
				   }else{
				   	$("#step1user").next().next("label").show();
				   	return false;
				   }
				   return true;
			}
			//第一步跳转结束
			//第二步手机验证开始
			function step2_phoneyz(){
				var step2phoneuser=$("#step2phoneuser").val();
				var step2phoneyzm=$("#step2phoneyzm").val();
				var re=/^1([3]\d|4[57]|5[^3]|8\d)\d{8}$/;
				if(step2phoneuser==""){
//					$("#step2phoneuser").css("border-color","#FF0000");
					$("#step2phoneuser").next("label").show();
					$("#step2phoneuser").next().next("label").hide();
					return false;
				}
//				$("#step2phoneuser").css("border-color","#cccccc");
				$("#step2phoneuser").next("label").hide();
				
				if(step2phoneyzm==""){
//					$("#step2phoneyzm").css("border-color","#FF0000");
					$("#step2phoneyzm").next().next("label").show();
					return false;
				}
//				$("#step2phoneyzm").css("border-color","#cccccc");
				$("#step2phoneyzm").next().next("label").hide();
				if(re.test(step2phoneuser)){
					$("#myform_step2_phone").hide();
					$("#myform_step3").show();
					$(".forgotline2").hide();
					$(".forgotline3").show();
				   }else{
				   	$("#step2phoneuser").next().next("label").show();
				   	return false;
				   }
				   return true;
			}
			//第二步手机验证结束
			//第二步邮箱验证开始
			function step2_emailyz(){
				var step2emailuser=$("#step2emailuser").val();
				var step2emailyzm=$("#step2emailyzm").val();
				var reg =/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((\.[a-zA-Z0-9_-]{2,3}){1,2})$/;
				if(step2emailuser==""){
//					$("#step2emailuser").css("border-color","#FF0000");
					$("#step2emailuser").next("label").show();
					$("#step2emailuser").next().next("label").hide();
					return false;
				}
//				$("#step2emailuser").css("border-color","#cccccc");
				$("#step2emailuser").next("label").hide();
				
				if(step2emailyzm==""){
					//$("#step2emailyzm").css("border-color","#FF0000");
					$("#step2emailyzm").next().next("label").show();
					return false;
				}
				//$("#step2emailyzm").css("border-color","#cccccc");
				$("#step2emailyzm").next().next("label").hide();
				if(reg.test(step2emailuser)){
					
					$("#myform_step2_email").hide();
					$("#myform_step3").show();
					$(".forgotline2").hide();
					$(".forgotline3").show();
				   }else{
				   	$("#step2emailuser").next().next("label").show();
				   	return false;
				   }
				   return true;
			}
			//第二步邮箱验证结束
			//第三步验证开始
			function step3yz(){
				var step3_psd1=$("#step3_psd1").val();
				var step3_psd2=$("#step3_psd2").val();
				if(step3_psd1==""){
					$("#step3_psd1").next("label").show();
					return false;
				}
				$("#step3_psd1").next("label").hide();
				if(step3_psd1.length<6 || step3_psd1.length>16){
					$("#step3_psd1").next().next("label").show();
					return false;
				}
				$("#step3_psd1").next().next("label").hide();
				if(step3_psd2==""){
					$("#step3_psd2").next("label").show();
					return false;
				}
				$("#step3_psd2").next("label").hide();
				if(step3_psd1!=step3_psd2){
					$("#step3_psd2").next().next("label").show();
					return false;
				}
				$("#step3_psd2").next().next("label").hide();
				
//				if(step3_psd2.length<6 || step3_psd2.length>16){
//					$("#step3_psd2").next().next().next("label").show();
//					return false;
//				}
//				$("#step3_psd2").next().next().next("label").hide();
				return true;
			}
			//第三步验证结束
		</script>
	</head>

	<body>
		<!--#include file="head.html"-->
		<!--内容开始-->
		<div class="container">
			<div class="sm_container">
				<p class="forgot_title">
					取回账号密码
				</p>
				<div class="threesteps">
					<div class="am-u-sm-12 forgotline1">
						<img src="__PUBLIC__/assets/i/forgotline1.png" />
					</div>
					<div class="am-u-sm-12 forgotline2">
						<img src="__PUBLIC__/assets/i/forgotline2.png" />
					</div>
					<div class="am-u-sm-12 forgotline3">
						<img src="__PUBLIC__/assets/i/forgotline3.png" />
					</div>
					<div class="am-u-sm-4 step1">
						<p>
							输入账号
						</p>
					</div>
					<div class="am-u-sm-4 step2">
						<p>
							验证
						</p>
					</div>
					<div class="am-u-sm-4 step3">
						<p>
							重置密码
						</p>
					</div>
				</div>
				<form id="myform_step1" class="am-form forgot_form">
					<div class="step1_div">
						<div class="am-form-group form_margin">
			        		<input name="step1user" id="step1user" type="text" class="am-form-field form_input" placeholder="请输入您绑定成者账号的邮箱或是手机号码"/>
			        		<label generated="true" class="error" style="display: none;">不能为空.</label>
			        		<label generated="true" class="error" style="display: none;">请输入邮箱或是手机号码.</label>
						</div>
			        	<div class="am-form-group form_margin">
			        		<input name="step1yzm" id="step1yzm" type="text" class="am-form-field form_input" placeholder="验证码" style="width: 50%; float: left;"/>
			        		<div class="am-form-field btn_yzm2" style="width: 50%; float: left;">
			        			<div class="am-u-sm-6" style="padding: 0; text-align: center;">
			        				<img src="__PUBLIC__/assets/i/yzm_pic.jpg" class="yzm_pic"/>
			        			</div>
			        			<div class="am-u-sm-6" style="padding: 0; text-align: center;">
			        				<a href="javascript:;" class="yzm_change">换一换</a>
			        			</div>
			        		</div>
			        		<label generated="true" class="error" style="display: none;">不能为空.</label>
			        	</div>
						<div class="am-form-group form_margin">
			        		<input type="button" class="am-form-field btn_login btn_forgot" value="下一步" onclick="return step1yz();"/> 
			        	</div>
					</div>
		        	<div class="step1_phone">
		        		<div class="am-form-group form_margin">
			        		<input type="button" class="am-form-field btn_login btn_forgot" value="通过手机验证" onclick="$('#myform_step1').hide(),$('#myform_step2_phone').show(),$('.forgotline1').hide(),$('.forgotline2').show();"/>
			        	</div>
		        	</div>
		        	<div class="step1_email">
		        		<div class="am-form-group form_margin">
			        		<input type="button" class="am-form-field btn_login btn_forgot" value="通过邮箱验证" onclick="$('#myform_step1').hide(),$('#myform_step2_email').show(),$('.forgotline1').hide(),$('.forgotline2').show();"/>
			        	</div>
		        	</div>
		        </form>
		        <form id="myform_step2_phone" class="am-form forgot_form">
						<div class="am-form-group form_margin">
			        		<input name="step2phoneuser" id="step2phoneuser" type="text" class="am-form-field form_input" value="13333333333"/>
			        		<label generated="true" class="error" style="display: none;">不能为空.</label>
			        		<label generated="true" class="error" style="display: none;">请输入手机号码.</label>
			        	</div>
			        	<div class="am-form-group form_margin">
			        		<input name="step2phoneyzm" id="step2phoneyzm" type="text" class="am-form-field form_input" placeholder="验证码" style="width: 50%; float: left;"/>
			        		<input type="button" class="am-form-field btn_yzm" value="获取验证码" style="width: 50%; float: left;"/>
			        		<label generated="true" class="error" style="display: none;">不能为空.</label>
			        	</div>
						<div class="am-form-group form_margin">
			        		<input type="button" class="am-form-field btn_login btn_forgot" value="下一步" onclick="return step2_phoneyz();"/>
			        	</div>
		        </form>
		        <form id="myform_step2_email" class="am-form forgot_form">
	        		<div class="am-form-group form_margin">
		        		<input name="step2emailuser" id="step2emailuser" type="text" class="am-form-field form_input" value="123456@126.com"/>
		        		<label generated="true" class="error" style="display: none;">不能为空.</label>
		        		<label generated="true" class="error" style="display: none;">请输入邮箱.</label>
		        	</div>
		        	<div class="am-form-group form_margin">
		        		<input name="step2emailyzm" id="step2emailyzm" type="text" class="am-form-field form_input" placeholder="验证码" style="width: 50%; float: left;"/>
		        		<input type="button" class="am-form-field btn_yzm" value="获取验证码" style="width: 50%; float: left;"/>
		        		<label generated="true" class="error" style="display: none;">不能为空.</label>
		        	</div>
					<div class="am-form-group form_margin">
		        		<input type="button" class="am-form-field btn_login btn_forgot" value="下一步" onclick="return step2_emailyz();"/>
		        	</div>
	        	</form>
	        	<form id="myform_step3" class="am-form forgot_form">
	        		<div class="am-form-group form_margin">
		        		<input name="step3_psd1" id="step3_psd1" type="password" class="am-form-field form_input" placeholder="请设置6~16位新密码" />
		        		<label generated="true" class="error" style="display: none;">不能为空.</label>
		        		<label generated="true" class="error" style="display: none;">请输入6~16位字符.</label>
		        	</div>
		        	<div class="am-form-group form_margin">
		        		<input name="step3_psd2" id="step3_psd2" type="password" class="am-form-field form_input" placeholder="重复新密码" />
		        		<label generated="true" class="error" style="display: none;">不能为空.</label>
		        		<label generated="true" class="error" style="display: none;">输入密码不一致.</label>
		        	</div>
					<div class="am-form-group form_margin">
		        		<input type="submit" class="am-form-field btn_login btn_forgot" value="提交新密码" onclick="return step3yz();"/>
		        	</div>
	        	</form>
			</div>
		</div>

		<!--内容结束-->
		<!--#include file="foot.html"-->
	</body>

</html>